
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@page isELIgnored="false" %>
<html>
<head>
    <title>商品列表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link type="text/css" rel="stylesheet" href="css/bootstrap.css">
    <link type="text/css" rel="stylesheet" href="css/style.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="layer/layer.js"></script>
    <script type="text/javascript" src="js/cart.js"></script>
</head>
<body>
<!--header-->
<jsp:include page="/header.jsp">
    <jsp:param name="flag" value="1"></jsp:param>
</jsp:include>

<!--banner-->

<div class="banner">
    <div class="container">
        <p>今日热门面试岗位推荐${post.pname}</p>
        <c:if test="${not empty posts}">
            <div id="carousel-banner" class="carousel slide" data-ride="carousel">
                <!-- 轮播指标 -->
                <ol class="carousel-indicators">
                    <c:forEach items="${posts}" var="post" varStatus="status">
                        <li data-target="#carousel-banner" data-slide-to="${status.index}" ${status.index == 0 ? 'class="active"' : ''}></li>
                    </c:forEach>
                </ol>

                <!-- 轮播内容 -->
                <div class="carousel-inner">
                    <c:forEach items="${posts}" var="post" varStatus="status">
                        <div class="item ${status.index == 0 ? 'active' : ''}">
                            <img src="${post.image}" alt="${post.pname}" class="img-responsive">
                            <div class="carousel-caption">
                                <h3>${post.pname}</h3>
                                <p class="post-description">${post.description}</p>
                            </div>
                        </div>
                    </c:forEach>
                </div>

                <!-- 轮播控制 -->
                <a class="left carousel-control" href="#carousel-banner" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                </a>
                <a class="right carousel-control" href="#carousel-banner" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </a>
            </div>
        </c:if>
        <c:if test="${empty posts}">
            <div class="alert alert-info" role="alert">
                暂无热门岗位推荐
            </div>
        </c:if>
    </div>
</div>

<!--//banner-->


<!--gallery-->
<!--gallery-->
<div class="gallery">
    <div class="container">
        <div class="alert alert-danger">热门文章推荐</div>
        <c:if test="${not empty postArticles}">
            <div class="row">
            <c:forEach items="${postArticles}" var="article" varStatus="status">
                <div class="col-sm-4">
                    <div class="thumbnail">
                        <img src="${article.image}" alt="${article.pname}" class="img-responsive">
                        <div class="caption">
                            <h3>${article.pname}</h3>
                            <p>${article.description}</p>
                            <!-- 这里可以添加更多交互元素，比如查看文章详情的链接等 -->
                            <p><a href="#" class="btn btn-primary" role="button">查看详情</a></p>
                        </div>
                    </div>
                </div>
                <!-- 根据实际情况，每几个文章一行进行换行排版，这里示例是每行3个文章 -->
                <c:if test="${status.index % 3 == 2 && status.index!= 0}">
                    </div><div class="row">
                </c:if>
            </c:forEach>
            </div>
        </c:if>
        <c:if test="${empty postArticles}">
            <div class="alert alert-info" role="alert">
                暂无热门文章推荐
            </div>
        </c:if>
    </div>
</div>
<!--//gallery-->
<!--//gallery-->
<!--subscribe-->
<div class="subscribe"></div>
<!--//subscribe-->


<!--footer-->
<jsp:include page="/footer.jsp"></jsp:include>
</body>
<script>

</script>
</html>
